<template>
  <page-card title="岗位管理">
    <div class="rank-list">
      <div class="rank-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
            <a-button type="primary"
                      icon="plus"
                      action
                      @click="handleEdit('')">
              新增
            </a-button>
          </a-col>
          <a-col>
            <a-input-search v-model="params.jobName"
                            placeholder="岗位名称"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </div>
      <div class="rank-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => index"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleEdit(item.id)">编辑</a>
            </template>
            <a-divider type="vertical" />
            <template>

              <a-popconfirm title="确定要删除吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="handleDelete(item.id)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>

    </div>
  </page-card>
</template>

<script>
import { getJobPage, deleteJobById } from '../../api/job/index'
import { PAGINATION } from '../../constants'
export default {
  name: 'JobManagementList',
  components: {},
  data () {
    return {
      pagination: PAGINATION,
      params: {
        // 查询条件
        jobName: ''
        // jobCode: ''
      },
      dataList: [
        // {
        //   id: '1111',
        //   name: '职级名称'
        // }
      ],
      columns: [
        {
          title: '序号',
          width: 100,
          align: 'center',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '岗位名称',
          align: 'center',
          dataIndex: 'jobName',
          ellipsis: true,
          scopedSlots: { customRender: 'tl' }
        },
        {
          title: '岗位编码',
          align: 'center',
          dataIndex: 'jobCode',
          ellipsis: true
        },
        {
          title: '排序号',
          align: 'center',
          dataIndex: 'orderNo',
          ellipsis: true
        },
        {
          title: '操作',
          width: 130,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    if (!this.$route.meta.keepAlive) {
      this.load()
    }
  },
  activated () {
    this.load()
  },
  methods: {
    // 搜索
    search () {
      this.pagination.current = 1
      this.load()
    },
    // 列表数据
    load () {
      let params2 = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize,
        jobName: this.params.jobName
      }
      getJobPage(params2).then(res => {
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
        this.dataList = res.list || []
      })
    },
    // 新增、修改
    handleEdit (id) {
      this.$router.push({
        path: '/job/edit',
        query: { id: id }
      })
    },
    // 删除
    handleDelete (id) {
      deleteJobById(id).then((res) => {
        this.message.info('删除成功！')
        if (this.isDeleteLastRow(id) && this.pagination.current > 1) {
          this.pagination.current--
        }
        this.load()
      })
    },
    // 判断是否删除的是当前页最后一条记录，如果是，则页码减一
    isDeleteLastRow (id) {
      const index = this.dataList.findIndex(item => item.id === id)
      return this.dataList.length === 1 && index === 0
    },
    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    }
  }
}
</script>

<style lang="less" scoped>
.rank-list {
  &-tools {
  }
  &-panel {
  }
}
</style>